<template>
    <!-- 整体布局 -->
    <el-container>
        <!-- 左侧菜单 -->
        <el-aside width="200px">

            <el-menu router unique-opened default-active="/home" class="el-menu-vertical-demo"
                background-color="#304156" text-color="#fff" active-text-color="#ffd04b" style="border-right: none;">

                <el-menu-item index="/home">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">首页</span>
                </el-menu-item>

                <el-menu-item index="/community">
                    <i class="el-icon-setting"></i>
                    <span slot="title">小区管理</span>
                </el-menu-item>

                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-s-operation"></i>
                        <span>帮买取快递废品回收</span>
                    </template>
                    <el-menu-item index="/store">
                        <i class="el-icon-paperclip"></i>
                        门店管理
                    </el-menu-item>
                    <el-menu-item index="/courierStation">
                        <i class="el-icon-paperclip"></i>
                        驿站管理
                    </el-menu-item>
                    <el-menu-item index="/commodity">
                        <i class="el-icon-paperclip"></i>
                        商品管理
                    </el-menu-item>
                    <el-menu-item index="3-4">
                        <i class="el-icon-paperclip"></i>
                        订单管理
                    </el-menu-item>
                    <el-menu-item index="3-5">
                        <i class="el-icon-paperclip"></i>
                        废品回收订单
                    </el-menu-item>
                </el-submenu>

                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-s-operation"></i>
                        <span>胖虎甄选</span>
                    </template>
                    <el-menu-item index="4-1">
                        <i class="el-icon-paperclip"></i>
                        商品管理
                    </el-menu-item>
                    <el-menu-item index="4-2">
                        <i class="el-icon-paperclip"></i>
                        订单管理
                    </el-menu-item>
                    <el-menu-item index="4-3">
                        <i class="el-icon-paperclip"></i>
                        售后订单
                    </el-menu-item>
                </el-submenu>

            </el-menu>

        </el-aside>
        <!-- 右侧内容 -->
        <el-container>
            <!-- 右上内容 -->
            <el-header>
                <div class="header-left">
                    <i class="el-icon-s-fold icon"></i>
                </div>
                <div class="header-right">
                    <!-- @command：是函数，专门处理下拉框中的请求事件的  -->
                    <el-dropdown @command="handleCommand" trigger="click">
                        <span class="el-dropdown-link">
                            <img src="../assets/logo.png" alt=""> 你好, 张三
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                            <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
                            <el-dropdown-item command="system">系统设置</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <!-- 右下内容 -->
            <el-main>
                <!-- 路由占位符 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    methods: {
        // 处理顶部用户下拉框信息
        handleCommand(command) {
            //this.$message('click on item ' + command);
            if (command == 'logout') {
                sessionStorage.removeItem('username');
                this.$router.push('/')
            }
        }
    }
}
</script>

<style scoped>
.el-container {
    height: 100vh;
}

.el-aside {
    /* !important : 提高当前样式的优先级 */
    width: 210px !important;
    background-color: #304156;
    height: 100%;
}

/* .el-header {
    height: 60px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
} */

/* header头部样式 */
.header-left {
    float: left;
}

.header-left .icon {
    font-size: 26px;
    padding-top: 17px;
    cursor: pointer;
}

.el-dropdown-link {
    cursor: pointer;
}

.header-right {
    float: right;
    line-height: 60px;
}

.header-right img {
    height: 50px;
    vertical-align: middle;
}

/* .el-menu-item-group_title{
    padding-bottom: 0px;
    padding-top: 0px;
    display: none;
} */
</style>